<template>
  <view class="flex-row align-center">
    <view class="search-box flex-item margin-right-24 flex-row align-center padding-lr-16">
      <!-- #ifndef APP-PLUS -->
      <text class="tbb-search flex-row flex-center text-32 color-t3 margin-right-8" />
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <text class="iconfont flex-row flex-center text-32 color-t3 margin-right-8">&#xe741;</text>
      <!-- #endif -->
      <input :value="value" class="input text-24 color-t1 flex-item" type="text" :placeholder="placeholder" placeholder-class="text-t3" confirm-type="search" @confirm="confirm" @input="input">
      <view v-if="value.length" class="padding-left-10" @click="clear">
        <view class="clear flex-row flex-center">
          <!-- #ifndef APP-PLUS -->
          <text class="tbb-guanbi1 flex-row flex-center text-24 color-t3" />
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <text class="iconfont flex-row flex-center text-24 color-t3">&#xe61e;</text>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <tui-button :text="text" width="186rpx" height="64rpx" border-radius="8rpx" :size="28" :shadow="false" @click="click">
      <!-- #ifndef APP-PLUS -->
      <text class="tbb-tianjia1 flex-row flex-center text-32 color-button margin-right-8" />
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <text class="iconfont flex-row flex-center text-32 color-button margin-right-8">&#xe620;</text>
      <!-- #endif -->
    </tui-button>
  </view>
</template>

<script>
export default {
  name: 'TopSearch',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  },
  methods: {
    clear() {
      this.$emit('clear')
    },
    confirm() {
      this.$emit('confirm')
    },
    click() {
      this.$emit('click')
    },
    input(e) {
      this.$emit('input', e.detail.value)
    }
  }
}
</script>

<style scoped lang="scss">
@include setMargin(right,24);

@include setPadding(lr,16);

@include setMargin(right,8);

.search-box{
  border-radius:8rpx;
  background:#FFFFFF
}
.input{
  height:64rpx;
}
.clear{
  width:40rpx;
  height:40rpx;
  border-radius:50%;
  background:$color-background;
}
</style>
